import React from "react";
import ReactDom from 'react-dom';

import './Props.css'

class Father extends React.Component {
    state = {
        count:0
    }
    change=(data)=> {
        this.setState({
            count:data + this.state.count
        })
    }
    render() {
        return (

            <div className='fatherBox'>
                <h1>父组件 <span>接受子组件传递过来的数据: {this.state.getVal}</span></h1>
                <Child1 count={this.state.count}></Child1>
                <Child2 handler={(data)=>{this.change(data)}}></Child2>
            </div>
        )
    }
}

class Child1 extends React.Component {
    render() {
        return (
            <div className='childBox'>
                <h1>子组件接受count：{this.props.count}</h1>
            </div>
        )
    }
}

class Child2 extends React.Component {
    state = {
        msg: "child msg",
        num:10
    }

    myClick = () => {
        this.props.handler(this.state.num)
    }

    render() {
        return (
            <div className='childBox'>
                <h1>子组件</h1>
                <button onClick={this.myClick}>click</button>
            </div>
        )
    }
}


export default Father
